<template>
  <div>
    <el-collapse>
      <el-collapse-item title="接口设置">
        <el-form-item label="接口类型">
          <el-radio-group v-model="elementApiServiceTask.type">
            <el-radio-button label="本地接口" value="local" />
            <el-radio-button label="模型接口" value="model" />
            <el-radio-button label="注册接口" value="register" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="接口配置" v-if="elementApiServiceTask.setting">
          <span>{{ elementApiServiceTask.setting.interfaceUrl ?? '暂无' }}</span>
          <text-edit-button @click="openTaskSetting" />
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </div>
  <service-task-setting v-model="visible" :data="elementApiServiceTask.setting" @submit="handleApiSettingSubmit" />
  <service-task-doc-setting v-model="showDialog" :type="elementApiServiceTask.type" :data="elementApiServiceTask.setting" @submit="handleApiSettingSubmit" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import serviceTaskSetting from '../../common/ServiceTaskSetting.vue';
import serviceTaskDocSetting from '../../common/ServiceTaskDocSetting.vue';
import { mapState } from 'pinia';
import modelerStore from '@wf/components/bpmnjs/store/modeler';
import { getApiServiceTaskValue, setApiServiceTaskValue } from '@wf/components/bpmnjs/bo-utils/serviceTaskUtil';

export default defineComponent({
  name: 'ElementServiceTask',
  components: { serviceTaskSetting, serviceTaskDocSetting },
  data() {
    return {
      elementApiServiceTask: {},
      visible: false,
      showDialog: false
    };
  },
  computed: {
    ...mapState(modelerStore, ['getActive', 'getActiveId'])
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getElementApiServiceTask();
    },
    getElementApiServiceTask() {
      const apiServiceTask = getApiServiceTaskValue(this.getActive);
      if (!apiServiceTask) {
        this.elementApiServiceTask = {
          type: 'local', // 接口类型
          // 接口配置
          setting: {
            model: '', // 模型接口模型名称
            api: '', // 模型接口方法名称
            interfaceUrl: '', // 接口地址
            method: '', // 请求方式
            contentType: '', // 请求体类型
            // 入参绑定
            params: [],
            // 出参绑定
            outputVariables: []
          }
        };
      } else {
        this.elementApiServiceTask = apiServiceTask;
      }
    },
    handleApiSettingSubmit(data) {
      this.elementApiServiceTask.setting = data;
      setApiServiceTaskValue(this.getActive, this.elementApiServiceTask);
    },
    openTaskSetting() {
      if (this.elementApiServiceTask.type == 'local') {
        this.visible = true;
      } else {
        this.showDialog = true;
      }
    }
  }
});
</script>
